<template>
  <div class="vulnerability-workflow-container">
    <el-card class="workflow-card">
      <template #header>
        <div class="card-header">
          <h2>漏洞管理工作流</h2>
          <div class="header-actions">
            <el-button type="primary" @click="showBulkActionDialog = true" :disabled="selectedVulnerabilities.length === 0">
              <el-icon><Operation /></el-icon>
              批量操作
            </el-button>
            <el-button @click="exportWorkflowData">
              <el-icon><Download /></el-icon>
              导出数据
            </el-button>
            <el-button @click="refreshData">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>
        </div>
      </template>

      <!-- 搜索和筛选 -->
      <div class="search-filter-container">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input
              v-model="searchQuery"
              placeholder="搜索漏洞ID或描述"
              prefix-icon="Search"
              clearable
              @input="handleSearch"
            />
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="filterStatus"
              placeholder="选择状态"
              clearable
              @change="handleFilter"
            >
              <el-option
                v-for="status in workflowStatuses"
                :key="status.value"
                :label="status.label"
                :value="status.value"
              />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="filterSeverity"
              placeholder="选择严重程度"
              clearable
              @change="handleFilter"
            >
              <el-option label="严重" value="critical" />
              <el-option label="高危" value="high" />
              <el-option label="中危" value="medium" />
              <el-option label="低危" value="low" />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="filterAssignee"
              placeholder="选择处理人"
              clearable
              filterable
              @change="handleFilter"
            >
              <el-option
                v-for="user in teamMembers"
                :key="user.id"
                :label="user.name"
                :value="user.id"
              />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="filterDueDate"
              placeholder="选择截止日期"
              clearable
              @change="handleFilter"
            >
              <el-option label="今天" value="today" />
              <el-option label="本周内" value="this_week" />
              <el-option label="本月内" value="this_month" />
              <el-option label="已过期" value="overdue" />
            </el-select>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="resetFilters">
              重置
            </el-button>
          </el-col>
        </el-row>
      </div>

      <!-- 工作流统计卡片 -->
      <div class="workflow-stats">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-statistic :value="totalVulnerabilities" title="漏洞总数" />
          </el-col>
          <el-col :span="4">
            <el-statistic :value="newVulnerabilities" title="待确认" />
          </el-col>
          <el-col :span="4">
            <el-statistic :value="inProgressVulnerabilities" title="处理中" />
          </el-col>
          <el-col :span="4">
            <el-statistic :value="fixedVulnerabilities" title="已修复" />
          </el-col>
          <el-col :span="4">
            <el-statistic :value="verifiedVulnerabilities" title="已验证" />
          </el-col>
          <el-col :span="4">
            <el-statistic :value="overdueVulnerabilities" title="已过期" />
          </el-col>
        </el-row>
      </div>

      <!-- 工作流状态看板 -->
      <div class="workflow-board">
        <div class="workflow-columns">
          <div 
            v-for="status in activeWorkflowStatuses" 
            :key="status.value"
            class="workflow-column"
            :class="{ 'overdue-column': status.value === 'overdue' }"
          >
            <div class="column-header">
              <h3>{{ status.label }}</h3>
              <el-badge :value="getStatusCount(status.value)" :type="getStatusBadgeType(status.value)" />
            </div>
            <div class="column-content">
              <draggable
                :model-value="getStatusVulnerabilities(status.value)"
                group="vulnerabilities"
                item-key="id"
                ghost-class="ghost"
                @end="handleDragEnd"
                @add="handleDragAdd"
                @remove="handleDragRemove"
              >
                <template #item="{ element }">
                  <div 
                    class="vulnerability-card"
                    :class="getVulnerabilityCardClass(element)"
                    @click="viewVulnerabilityDetails(element)"
                    :title="element.description"
                  >
                    <div class="vulnerability-header">
                      <span class="vulnerability-id">#{{ element.id }}</span>
                      <el-tag :type="getSeverityType(element.severity)">{{ getSeverityLabel(element.severity) }}</el-tag>
                    </div>
                    <div class="vulnerability-title">{{ truncateText(element.title, 35) }}</div>
                    <div class="vulnerability-meta">
                      <div class="asset-info">{{ truncateText(element.assetInfo, 25) }}</div>
                      <div class="vulnerability-type">{{ element.type }}</div>
                    </div>
                    <div class="vulnerability-footer">
                      <div class="assignee-info" v-if="element.assignee">
                        <el-avatar :size="20" :src="getAssigneeAvatar(element.assignee)">
                          {{ getAssigneeName(element.assignee).charAt(0) }}
                        </el-avatar>
                        <span class="assignee-name">{{ truncateText(getAssigneeName(element.assignee), 8) }}</span>
                      </div>
                      <div class="due-date" :class="{ 'due-date-overdue': isOverdue(element.dueDate) }">
                        {{ element.dueDate ? formatDate(element.dueDate) : '无截止日期' }}
                      </div>
                    </div>
                  </div>
                </template>
              </draggable>
            </div>
          </div>
        </div>
      </div>

      <!-- 详情表格 -->
      <div class="workflow-table-container">
        <el-table
          v-loading="loading"
          :data="paginatedVulnerabilities"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          @row-dblclick="editVulnerabilityWorkflow"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="ID" width="100" />
          <el-table-column prop="title" label="标题" min-width="200">
            <template #default="scope">
              <div class="vulnerability-title-cell">
                <div class="vulnerability-title">{{ scope.row.title }}</div>
                <div class="vulnerability-type">{{ scope.row.type }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="严重程度" width="100" align="center">
            <template #default="scope">
              <el-tag :type="getSeverityType(scope.row.severity)" effect="dark">
                {{ getSeverityLabel(scope.row.severity) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100" align="center">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)" effect="plain">
                {{ getStatusLabel(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="assetInfo" label="资产信息" min-width="150" />
          <el-table-column label="处理人" width="120">
            <template #default="scope">
              <div v-if="scope.row.assignee" class="assignee-cell">
                <el-avatar :size="24" :src="getAssigneeAvatar(scope.row.assignee)">
                  {{ getAssigneeName(scope.row.assignee).charAt(0) }}
                </el-avatar>
                <span>{{ getAssigneeName(scope.row.assignee) }}</span>
              </div>
              <span v-else class="no-assignee">未分配</span>
            </template>
          </el-table-column>
          <el-table-column label="发现日期" width="150">
            <template #default="scope">
              {{ formatDate(scope.row.discoveredDate) }}
            </template>
          </el-table-column>
          <el-table-column label="截止日期" width="150">
            <template #default="scope">
              <div :class="{ 'overdue-text': scope.row.dueDate && isOverdue(scope.row.dueDate) }">
                {{ scope.row.dueDate ? formatDate(scope.row.dueDate) : '无' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="解决期限" width="100" align="center">
            <template #default="scope">
              <el-tag :type="getDueTimeType(scope.row.severity)" effect="plain" size="small">
                {{ getDueTimeLabel(scope.row.severity) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" fixed="right">
            <template #default="scope">
              <el-button
                type="primary"
                link
                @click="viewVulnerabilityDetails(scope.row)"
                size="small"
                title="查看详情"
              >
                <el-icon><View /></el-icon>
              </el-button>
              <el-button
                type="primary"
                @click="editVulnerabilityWorkflow(scope.row)"
                size="small"
                title="编辑工作流"
              >
                <el-icon><Edit /></el-icon>
              </el-button>
              <el-button
                type="danger"
                link
                @click="markAsFalsePositive(scope.row)"
                size="small"
                title="误报处理"
              >
                <el-icon><CircleClose /></el-icon>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="filteredVulnerabilities.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 批量操作对话框 -->
    <el-dialog
      v-model="showBulkActionDialog"
      title="批量操作"
      width="500px"
    >
      <el-form
        ref="bulkActionFormRef"
        :model="bulkActionForm"
        :rules="bulkActionFormRules"
        label-width="120px"
      >
        <el-form-item label="操作类型" prop="actionType">
          <el-select
            v-model="bulkActionForm.actionType"
            placeholder="请选择操作类型"
          >
            <el-option label="分配处理人" value="assign" />
            <el-option label="更改状态" value="change_status" />
            <el-option label="设置截止日期" value="set_due_date" />
            <el-option label="添加标签" value="add_tags" />
            <el-option label="批量关闭" value="close" />
          </el-select>
        </el-form-item>
        
        <el-form-item v-if="bulkActionForm.actionType === 'assign'" label="处理人" prop="assignee">
          <el-select
            v-model="bulkActionForm.assignee"
            placeholder="请选择处理人"
          >
            <el-option
              v-for="user in teamMembers"
              :key="user.id"
              :label="user.name"
              :value="user.id"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item v-if="bulkActionForm.actionType === 'change_status'" label="状态" prop="status">
          <el-select
            v-model="bulkActionForm.status"
            placeholder="请选择状态"
          >
            <el-option
              v-for="status in workflowStatuses"
              :key="status.value"
              :label="status.label"
              :value="status.value"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item v-if="bulkActionForm.actionType === 'set_due_date'" label="截止日期" prop="dueDate">
          <el-date-picker
            v-model="bulkActionForm.dueDate"
            type="datetime"
            placeholder="选择截止日期"
            style="width: 100%"
          />
        </el-form-item>
        
        <el-form-item v-if="bulkActionForm.actionType === 'add_tags'" label="标签" prop="tags">
          <el-select
            v-model="bulkActionForm.tags"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择或输入标签"
            style="width: 100%"
          >
            <el-option
              v-for="tag in commonTags"
              :key="tag"
              :label="tag"
              :value="tag"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="备注" prop="notes">
          <el-input
            v-model="bulkActionForm.notes"
            type="textarea"
            placeholder="请输入操作备注"
            :rows="2"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showBulkActionDialog = false">取消</el-button>
          <el-button type="primary" @click="executeBulkAction">执行</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑工作流对话框 -->
    <el-dialog
      v-model="showEditWorkflowDialog"
      :title="`编辑工作流 - #${editingVulnerability?.id}`"
      width="600px"
    >
      <el-form
        ref="editWorkflowFormRef"
        :model="editWorkflowForm"
        :rules="editWorkflowFormRules"
        label-width="120px"
      >
        <el-form-item label="漏洞标题">
          <el-input :value="editingVulnerability?.title" disabled />
        </el-form-item>
        <el-form-item label="严重程度">
          <el-tag :type="getSeverityType(editingVulnerability?.severity)" effect="dark">
            {{ getSeverityLabel(editingVulnerability?.severity) }}
          </el-tag>
        </el-form-item>
        <el-form-item label="当前状态" prop="status">
          <el-select
            v-model="editWorkflowForm.status"
            placeholder="请选择状态"
          >
            <el-option
              v-for="status in workflowStatuses"
              :key="status.value"
              :label="status.label"
              :value="status.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="处理人" prop="assignee">
          <el-select
            v-model="editWorkflowForm.assignee"
            placeholder="请选择处理人"
          >
            <el-option
              v-for="user in teamMembers"
              :key="user.id"
              :label="user.name"
              :value="user.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="截止日期" prop="dueDate">
          <el-date-picker
            v-model="editWorkflowForm.dueDate"
            type="datetime"
            placeholder="选择截止日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="标签" prop="tags">
          <el-select
            v-model="editWorkflowForm.tags"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择或输入标签"
            style="width: 100%"
          >
            <el-option
              v-for="tag in commonTags"
              :key="tag"
              :label="tag"
              :value="tag"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="工作流备注" prop="notes">
          <el-input
            v-model="editWorkflowForm.notes"
            type="textarea"
            placeholder="请输入工作流备注"
            :rows="3"
            maxlength="500"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showEditWorkflowDialog = false">取消</el-button>
          <el-button type="primary" @click="saveWorkflowChanges">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 漏洞详情对话框 -->
    <el-dialog
      v-model="showDetailsDialog"
      :title="`漏洞详情 - #${selectedVulnerability?.id}`"
      width="800px"
    >
      <div class="vulnerability-details">
        <div class="details-section">
          <h3>基本信息</h3>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="漏洞标题">{{ selectedVulnerability?.title }}</el-descriptions-item>
            <el-descriptions-item label="ID">{{ selectedVulnerability?.id }}</el-descriptions-item>
            <el-descriptions-item label="严重程度">
              <el-tag :type="getSeverityType(selectedVulnerability?.severity)" effect="dark">
                {{ getSeverityLabel(selectedVulnerability?.severity) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="漏洞类型">{{ selectedVulnerability?.type }}</el-descriptions-item>
            <el-descriptions-item label="CVSS评分">{{ selectedVulnerability?.cvssScore || '-' }}</el-descriptions-item>
            <el-descriptions-item label="CVE编号">{{ selectedVulnerability?.cveId || '-' }}</el-descriptions-item>
            <el-descriptions-item label="发现日期">{{ formatDate(selectedVulnerability?.discoveredDate) }}</el-descriptions-item>
            <el-descriptions-item label="资产信息">{{ selectedVulnerability?.assetInfo }}</el-descriptions-item>
          </el-descriptions>
        </div>
        
        <div class="details-section">
          <h3>工作流信息</h3>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="当前状态">
              <el-tag :type="getStatusType(selectedVulnerability?.status)" effect="plain">
                {{ getStatusLabel(selectedVulnerability?.status) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="处理人">
              <div v-if="selectedVulnerability?.assignee" class="assignee-cell">
                <el-avatar :size="24" :src="getAssigneeAvatar(selectedVulnerability?.assignee)">
                  {{ getAssigneeName(selectedVulnerability?.assignee).charAt(0) }}
                </el-avatar>
                <span>{{ getAssigneeName(selectedVulnerability?.assignee) }}</span>
              </div>
              <span v-else class="no-assignee">未分配</span>
            </el-descriptions-item>
            <el-descriptions-item label="截止日期">
              <div :class="{ 'overdue-text': selectedVulnerability?.dueDate && isOverdue(selectedVulnerability?.dueDate) }">
                {{ selectedVulnerability?.dueDate ? formatDate(selectedVulnerability?.dueDate) : '无' }}
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="解决期限">
              <el-tag :type="getDueTimeType(selectedVulnerability?.severity)" effect="plain" size="small">
                {{ getDueTimeLabel(selectedVulnerability?.severity) }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        
        <div class="details-section">
          <h3>漏洞描述</h3>
          <div class="vulnerability-description">
            {{ selectedVulnerability?.description || '暂无描述' }}
          </div>
        </div>
        
        <div class="details-section">
          <h3>修复建议</h3>
          <div class="vulnerability-recommendation">
            {{ selectedVulnerability?.recommendation || '暂无建议' }}
          </div>
        </div>
        
        <div class="details-section">
          <h3>工作流日志</h3>
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in selectedVulnerability?.workflowLogs || []"
              :key="index"
              :timestamp="formatDate(item.timestamp)"
              :type="getLogType(item.action)"
            >
              <div class="timeline-content">
                <div class="log-user">{{ getAssigneeName(item.userId) }}</div>
                <div class="log-action">{{ item.action }}</div>
                <div class="log-details">{{ item.details }}</div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDetailsDialog = false">关闭</el-button>
          <el-button type="primary" @click="editVulnerabilityWorkflow(selectedVulnerability)">编辑工作流</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Edit, Delete, Play, Upload, Download, Search, View, CircleClose, Operation, Refresh } from '@element-plus/icons-vue'
import { VueDraggableNext as draggable } from 'vue-draggable-next'
import apiService from '../services/apiService.js'
import { formatDate } from '../utils/dateUtils.js'

// 响应式数据
const loading = ref(false)
const searchQuery = ref('')
const filterStatus = ref('')
const filterSeverity = ref('')
const filterAssignee = ref('')
const filterDueDate = ref('')
const currentPage = ref(1)
const pageSize = ref(20)
const selectedVulnerabilities = ref([])
const showBulkActionDialog = ref(false)
const showEditWorkflowDialog = ref(false)
const showDetailsDialog = ref(false)
const editingVulnerability = ref(null)
const selectedVulnerability = ref(null)
const allVulnerabilities = ref([])

// 工作流状态
const workflowStatuses = [
  { label: '待确认', value: 'new' },
  { label: '已确认', value: 'confirmed' },
  { label: '处理中', value: 'in_progress' },
  { label: '待验证', value: 'fixed' },
  { label: '已验证', value: 'verified' },
  { label: '已关闭', value: 'closed' },
  { label: '误报', value: 'false_positive' },
  { label: '已过期', value: 'overdue' }
]

// 活跃的工作流状态（用于看板显示）
const activeWorkflowStatuses = [
  { label: '待确认', value: 'new' },
  { label: '已确认', value: 'confirmed' },
  { label: '处理中', value: 'in_progress' },
  { label: '待验证', value: 'fixed' },
  { label: '已验证', value: 'verified' },
  { label: '已关闭', value: 'closed' }
]

// 团队成员
const teamMembers = [
  { id: '1', name: '张三', email: 'zhangsan@example.com', avatar: '' },
  { id: '2', name: '李四', email: 'lisi@example.com', avatar: '' },
  { id: '3', name: '王五', email: 'wangwu@example.com', avatar: '' },
  { id: '4', name: '赵六', email: 'zhaoliu@example.com', avatar: '' },
  { id: '5', name: '孙七', email: 'sunqi@example.com', avatar: '' }
]

// 常见标签
const commonTags = [
  '待修复', '优先级高', '需讨论', '计划中', '已安排',
  '验证中', '遗留问题', '重复漏洞', '无法修复', '临时修复'
]

// 批量操作表单
const bulkActionForm = reactive({
  actionType: '',
  assignee: '',
  status: '',
  dueDate: '',
  tags: [],
  notes: ''
})

// 编辑工作流表单
const editWorkflowForm = reactive({
  status: '',
  assignee: '',
  dueDate: '',
  tags: [],
  notes: ''
})

// 表单验证规则
const bulkActionFormRules = {
  actionType: [
    { required: true, message: '请选择操作类型', trigger: 'change' }
  ],
  assignee: [
    {
      required: () => bulkActionForm.actionType === 'assign',
      message: '请选择处理人',
      trigger: 'change'
    }
  ],
  status: [
    {
      required: () => bulkActionForm.actionType === 'change_status',
      message: '请选择状态',
      trigger: 'change'
    }
  ],
  dueDate: [
    {
      required: () => bulkActionForm.actionType === 'set_due_date',
      message: '请选择截止日期',
      trigger: 'change'
    }
  ]
}

const editWorkflowFormRules = {
  status: [
    { required: true, message: '请选择状态', trigger: 'change' }
  ]
}

// 计算属性
const filteredVulnerabilities = computed(() => {
  let result = [...allVulnerabilities.value]
  
  // 搜索过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(vuln => 
      vuln.id.toLowerCase().includes(query) ||
      vuln.title.toLowerCase().includes(query) ||
      (vuln.description && vuln.description.toLowerCase().includes(query))
    )
  }
  
  // 状态过滤
  if (filterStatus.value) {
    result = result.filter(vuln => vuln.status === filterStatus.value)
  }
  
  // 严重程度过滤
  if (filterSeverity.value) {
    result = result.filter(vuln => vuln.severity === filterSeverity.value)
  }
  
  // 处理人过滤
  if (filterAssignee.value) {
    result = result.filter(vuln => vuln.assignee === filterAssignee.value)
  }
  
  // 截止日期过滤
  if (filterDueDate.value) {
    const now = new Date()
    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
    const nextWeek = new Date(today)
    nextWeek.setDate(today.getDate() + 7)
    const nextMonth = new Date(today)
    nextMonth.setMonth(today.getMonth() + 1)
    
    result = result.filter(vuln => {
      if (!vuln.dueDate) return false
      const dueDate = new Date(vuln.dueDate)
      
      switch (filterDueDate.value) {
        case 'today':
          return dueDate.toDateString() === today.toDateString()
        case 'this_week':
          return dueDate >= today && dueDate <= nextWeek
        case 'this_month':
          return dueDate >= today && dueDate <= nextMonth
        case 'overdue':
          return dueDate < today
        default:
          return true
      }
    })
  }
  
  return result
})

const paginatedVulnerabilities = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredVulnerabilities.value.slice(start, end)
})

// 统计数据
const totalVulnerabilities = computed(() => {
  return allVulnerabilities.value.length
})

const newVulnerabilities = computed(() => {
  return allVulnerabilities.value.filter(v => v.status === 'new').length
})

const inProgressVulnerabilities = computed(() => {
  return allVulnerabilities.value.filter(v => v.status === 'in_progress' || v.status === 'confirmed').length
})

const fixedVulnerabilities = computed(() => {
  return allVulnerabilities.value.filter(v => v.status === 'fixed').length
})

const verifiedVulnerabilities = computed(() => {
  return allVulnerabilities.value.filter(v => v.status === 'verified').length
})

const overdueVulnerabilities = computed(() => {
  const now = new Date()
  return allVulnerabilities.value.filter(v => v.dueDate && new Date(v.dueDate) < now).length
})

// 方法
const loadVulnerabilities = async () => {
  loading.value = true
  try {
    // 这里模拟API调用，实际项目中应该调用真实API
    // const response = await apiService.getVulnerabilitiesWorkflow()
    // allVulnerabilities.value = response
    
    // 模拟数据
    allVulnerabilities.value = [
      {
        id: 'VULN-2024-0001',
        title: 'SQL注入漏洞 - 用户登录接口',
        description: '用户登录接口存在SQL注入漏洞，攻击者可以构造特殊的输入参数，绕过身份验证或提取数据库中的敏感信息。',
        recommendation: '使用参数化查询或预处理语句，避免直接拼接SQL语句。对输入进行严格的验证和过滤。',
        severity: 'high',
        cvssScore: 8.5,
        cveId: 'CVE-2023-1234',
        type: 'sql_injection',
        assetInfo: 'web-app.example.com:443',
        status: 'in_progress',
        assignee: '1',
        discoveredDate: '2024-01-10T08:30:00Z',
        dueDate: '2024-01-17T23:59:59Z',
        tags: ['优先级高', '计划中'],
        workflowLogs: [
          {
            timestamp: '2024-01-10T08:30:00Z',
            userId: '3',
            action: '漏洞发现',
            details: '通过自动化扫描发现SQL注入漏洞'
          },
          {
            timestamp: '2024-01-10T10:15:00Z',
            userId: '3',
            action: '状态更新',
            details: '状态从"待确认"更新为"已确认"'
          },
          {
            timestamp: '2024-01-11T09:30:00Z',
            userId: '1',
            action: '分配处理',
            details: '分配给张三进行修复'
          },
          {
            timestamp: '2024-01-12T14:20:00Z',
            userId: '1',
            action: '状态更新',
            details: '状态从"已确认"更新为"处理中"'
          }
        ]
      },
      {
        id: 'VULN-2024-0002',
        title: 'XSS漏洞 - 评论功能',
        description: '网站评论功能未对用户输入进行适当的过滤和转义，允许攻击者注入恶意脚本。',
        recommendation: '对所有用户输入进行严格的验证和HTML转义处理，设置适当的Content-Security-Policy。',
        severity: 'medium',
        cvssScore: 6.1,
        cveId: '',
        type: 'xss',
        assetInfo: 'blog.example.com:443',
        status: 'new',
        assignee: '',
        discoveredDate: '2024-01-12T16:45:00Z',
        dueDate: '2024-01-26T23:59:59Z',
        tags: [],
        workflowLogs: [
          {
            timestamp: '2024-01-12T16:45:00Z',
            userId: '5',
            action: '漏洞发现',
            details: '通过手动测试发现XSS漏洞'
          }
        ]
      },
      {
        id: 'VULN-2024-0003',
        title: '命令注入漏洞 - 系统管理接口',
        description: '系统管理接口存在命令注入漏洞，攻击者可以执行任意系统命令。',
        recommendation: '避免直接执行用户输入的命令，使用白名单机制，对输入进行严格的验证和过滤。',
        severity: 'critical',
        cvssScore: 9.8,
        cveId: 'CVE-2023-5678',
        type: 'command_injection',
        assetInfo: 'admin.example.com:8443',
        status: 'fixed',
        assignee: '2',
        discoveredDate: '2024-01-08T14:20:00Z',
        dueDate: '2024-01-12T23:59:59Z',
        tags: ['优先级高'],
        workflowLogs: [
          {
            timestamp: '2024-01-08T14:20:00Z',
            userId: '3',
            action: '漏洞发现',
            details: '通过安全扫描发现命令注入漏洞'
          },
          {
            timestamp: '2024-01-08T15:00:00Z',
            userId: '3',
            action: '状态更新',
            details: '状态从"待确认"更新为"已确认"'
          },
          {
            timestamp: '2024-01-09T09:15:00Z',
            userId: '2',
            action: '分配处理',
            details: '分配给李四进行紧急修复'
          },
          {
            timestamp: '2024-01-11T16:30:00Z',
            userId: '2',
            action: '状态更新',
            details: '状态从"已确认"更新为"处理中"'
          },
          {
            timestamp: '2024-01-12T10:45:00Z',
            userId: '2',
            action: '状态更新',
            details: '状态从"处理中"更新为"待验证"，已应用修复补丁'
          }
        ]
      },
      {
        id: 'VULN-2024-0004',
        title: '弱密码策略 - 管理员账户',
        description: '系统未强制实施强密码策略，管理员账户可能使用弱密码。',
        recommendation: '实施强密码策略，包括密码长度、复杂度要求，定期强制密码更换，启用多因素认证。',
        severity: 'medium',
        cvssScore: 5.3,
        cveId: '',
        type: 'weak_password',
        assetInfo: 'internal-api.example.com:8080',
        status: 'verified',
        assignee: '4',
        discoveredDate: '2024-01-05T11:30:00Z',
        dueDate: '2024-01-19T23:59:59Z',
        tags: ['已安排', '验证中'],
        workflowLogs: [
          {
            timestamp: '2024-01-05T11:30:00Z',
            userId: '3',
            action: '漏洞发现',
            details: '通过配置审计发现弱密码策略问题'
          },
          {
            timestamp: '2024-01-05T14:20:00Z',
            userId: '3',
            action: '状态更新',
            details: '状态从"待确认"更新为"已确认"'
          },
          {
            timestamp: '2024-01-08T09:45:00Z',
            userId: '4',
            action: '分配处理',
            details: '分配给赵六进行修复'
          },
          {
            timestamp: '2024-01-15T16:20:00Z',
            userId: '4',
            action: '状态更新',
            details: '状态从"已确认"更新为"处理中"'
          },
          {
            timestamp: '2024-01-18T11:30:00Z',
            userId: '4',
            action: '状态更新',
            details: '状态从"处理中"更新为"待验证"，已实施强密码策略'
          },
          {
            timestamp: '2024-01-19T10:15:00Z',
            userId: '3',
            action: '状态更新',
            details: '状态从"待验证"更新为"已验证"，验证通过'
          }
        ]
      },
      {
        id: 'VULN-2024-0005',
        title: '信息泄露 - 错误页面',
        description: '应用程序在错误页面泄露了敏感的系统信息，如服务器版本、文件路径等。',
        recommendation: '自定义错误页面，移除所有敏感信息，仅显示一般性错误消息。',
        severity: 'low',
        cvssScore: 3.7,
        cveId: '',
        type: 'info_disclosure',
        assetInfo: 'api.example.com:8080',
        status: 'closed',
        assignee: '5',
        discoveredDate: '2024-01-02T15:45:00Z',
        dueDate: '2024-01-16T23:59:59Z',
        tags: ['计划中'],
        workflowLogs: [
          {
            timestamp: '2024-01-02T15:45:00Z',
            userId: '3',
            action: '漏洞发现',
            details: '通过安全扫描发现错误页面信息泄露'
          },
          {
            timestamp: '2024-01-02T16:30:00Z',
            userId: '3',
            action: '状态更新',
            details: '状态从"待确认"更新为"已确认"'
          },
          {
            timestamp: '2024-01-03T09:15:00Z',
            userId: '5',
            action: '分配处理',
            details: '分配给孙七进行修复'
          },
          {
            timestamp: '2024-01-10T14:20:00Z',
            userId: '5',
            action: '状态更新',
            details: '状态从"已确认"更新为"处理中"'
          },
          {
            timestamp: '2024-01-15T11:30:00Z',
            userId: '5',
            action: '状态更新',
            details: '状态从"处理中"更新为"待验证"，已自定义错误页面'
          },
          {
            timestamp: '2024-01-16T10:45:00Z',
            userId: '3',
            action: '状态更新',
            details: '状态从"待验证"更新为"已验证"，验证通过'
          },
          {
            timestamp: '2024-01-17T09:30:00Z',
            userId: '3',
            action: '状态更新',
            details: '状态从"已验证"更新为"已关闭"，漏洞已修复'
          }
        ]
      },
      {
        id: 'VULN-2024-0006',
        title: 'CSRF漏洞 - 用户设置页面',
        description: '用户设置页面存在跨站请求伪造漏洞，攻击者可以诱导用户在已登录的情况下执行非预期操作。',
        recommendation: '实施CSRF令牌验证，验证请求来源，使用SameSite Cookie属性。',
        severity: 'medium',
        cvssScore: 6.5,
        cveId: '',
        type: 'csrf',
        assetInfo: 'user.example.com:443',
        status: 'new',
        assignee: '',
        discoveredDate: '2024-01-14T13:20:00Z',
        dueDate: '2024-01-28T23:59:59Z',
        tags: [],
        workflowLogs: [
          {
            timestamp: '2024-01-14T13:20:00Z',
            userId: '3',
            action: '漏洞发现',
            details: '通过手动测试发现CSRF漏洞'
          }
        ]
      },
      {
        id: 'VULN-2024-0007',
        title: '未授权访问 - 敏感API',
        description: '系统存在未授权访问漏洞，攻击者可以绕过身份验证直接访问敏感API。',
        recommendation: '确保所有API端点都有适当的身份验证和授权检查，实施统一的访问控制机制。',
        severity: 'high',
        cvssScore: 8.1,
        cveId: 'CVE-2023-9012',
        type: 'auth_bypass',
        assetInfo: 'api-admin.example.com:443',
        status: 'in_progress',
        assignee: '1',
        discoveredDate: '2024-01-11T09:15:00Z',
        dueDate: '2024-01-18T23:59:59Z',
        tags: ['优先级高'],
        workflowLogs: [
          {
            timestamp: '2024-01-11T09:15:00Z',
            userId: '3',
            action: '漏洞发现',
            details: '通过渗透测试发现未授权访问漏洞'
          },
          {
            timestamp: '2024-01-11T10:30:00Z',
            userId: '3',
            action: '状态更新',
            details: '状态从"待确认"更新为"已确认"'
          },
          {
            timestamp: '2024-01-12T09:45:00Z',
            userId: '1',
            action: '分配处理',
            details: '分配给张三进行修复'
          },
          {
            timestamp: '2024-01-13T14:20:00Z',
            userId: '1',
            action: '状态更新',
            details: '状态从"已确认"更新为"处理中"'
          }
        ]
      },
      {
        id: 'VULN-2024-0008',
        title: '路径遍历漏洞 - 文件下载功能',
        description: '文件下载功能存在路径遍历漏洞，攻击者可以访问服务器上的敏感文件。',
        recommendation: '对文件路径进行严格验证，使用白名单机制限制可访问的文件范围。',
        severity: 'high',
        cvssScore: 7.5,
        cveId: '',
        type: 'directory_traversal',
        assetInfo: 'download.example.com:443',
        status: 'confirmed',
        assignee: '2',
        discoveredDate: '2024-01-13T11:30:00Z',
        dueDate: '2024-01-20T23:59:59Z',
        tags: ['计划中'],
        workflowLogs: [
          {
            timestamp: '2024-01-13T11:30:00Z',
            userId: '3',
            action: '漏洞发现',
            details: '通过安全扫描发现路径遍历漏洞'
          },
          {
            timestamp: '2024-01-13T14:45:00Z',
            userId: '3',
            action: '状态更新',
            details: '状态从"待确认"更新为"已确认"'
          },
          {
            timestamp: '2024-01-14T09:30:00Z',
            userId: '2',
            action: '分配处理',
            details: '分配给李四进行修复'
          }
        ]
      },
      {
        id: 'VULN-2024-0009',
        title: '不安全的依赖库 - Jackson-databind',
        description: '应用程序使用的Jackson-databind库存在反序列化漏洞，可能导致远程代码执行。',
        recommendation: '升级到最新版本的Jackson-databind库，或应用相应的安全补丁。',
        severity: 'critical',
        cvssScore: 9.1,
        cveId: 'CVE-2020-36518',
        type: 'insecure_dependency',
        assetInfo: 'backend-service.example.com:8080',
        status: 'fixed',
        assignee: '4',
        discoveredDate: '2024-01-09T16:20:00Z',
        dueDate: '2024-01-13T23:59:59Z',
        tags: ['优先级高', '紧急'],
        workflowLogs: [
          {
            timestamp: '2024-01-09T16:20:00Z',
            userId: '3',
            action: '漏洞发现',
            details: '通过依赖扫描发现不安全的依赖库'
          },
          {
            timestamp: '2024-01-09T17:30:00Z',
            userId: '3',
            action: '状态更新',
            details: '状态从"待确认"更新为"已确认"'
          },
          {
            timestamp: '2024-01-10T09:15:00Z',
            userId: '4',
            action: '分配处理',
            details: '分配给赵六进行紧急修复'
          },
          {
            timestamp: '2024-01-11T14:20:00Z',
            userId: '4',
            action: '状态更新',
            details: '状态从"已确认"更新为"处理中"'
          },
          {
            timestamp: '2024-01-12T11:30:00Z',
            userId: '4',
            action: '状态更新',
            details: '状态从"处理中"更新为"待验证"，已升级Jackson-databind到安全版本'
          }
        ]
      },
      {
        id: 'VULN-2024-0010',
        title: '不安全的CORS配置',
        description: '网站的CORS（跨域资源共享）配置过于宽松，允许任何域名访问，可能导致跨域攻击。',
        recommendation: '配置严格的CORS策略，只允许必要的域名访问。',
        severity: 'low',
        cvssScore: 4.3,
        cveId: '',
        type: 'misconfiguration',
        assetInfo: 'api.example.com:443',
        status: 'false_positive',
        assignee: '',
        discoveredDate: '2024-01-15T14:45:00Z',
        dueDate: '2024-01-29T23:59:59Z',
        tags: [],
        workflowLogs: [
          {
            timestamp: '2024-01-15T14:45:00Z',
            userId: '3',
            action: '漏洞发现',
            details: '通过配置审计发现CORS配置问题'
          },
          {
            timestamp: '2024-01-16T09:30:00Z',
            userId: '3',
            action: '状态更新',
            details: '状态从"待确认"更新为"误报"，宽松的CORS配置是业务需求'
          }
        ]
      }
    ]
  } catch (error) {
    console.error('加载漏洞工作流失败:', error)
    ElMessage.error('加载漏洞工作流失败，请重试')
  } finally {
    loading.value = false
  }
}

const getStatusVulnerabilities = (status) => {
  return filteredVulnerabilities.value.filter(v => v.status === status)
}

const getStatusCount = (status) => {
  return allVulnerabilities.value.filter(v => v.status === status).length
}

const getSeverityType = (severity) => {
  const severityMap = {
    'critical': 'danger',
    'high': 'warning',
    'medium': 'info',
    'low': 'success'
  }
  return severityMap[severity] || 'default'
}

const getSeverityLabel = (severity) => {
  const labelMap = {
    'critical': '严重',
    'high': '高危',
    'medium': '中危',
    'low': '低危'
  }
  return labelMap[severity] || severity
}

const getStatusType = (status) => {
  const statusMap = {
    'new': 'info',
    'confirmed': 'warning',
    'in_progress': 'primary',
    'fixed': 'success',
    'verified': 'success',
    'closed': 'default',
    'false_positive': 'info',
    'overdue': 'danger'
  }
  return statusMap[status] || 'default'
}

const getStatusLabel = (status) => {
  const labelMap = workflowStatuses.reduce((map, s) => {
    map[s.value] = s.label
    return map
  }, {})
  return labelMap[status] || status
}

const getStatusBadgeType = (status) => {
  const badgeMap = {
    'new': 'info',
    'confirmed': 'warning',
    'in_progress': 'primary',
    'fixed': 'success',
    'verified': 'success',
    'closed': 'default',
    'overdue': 'danger'
  }
  return badgeMap[status] || 'default'
}

const getAssigneeName = (userId) => {
  const user = teamMembers.find(u => u.id === userId)
  return user ? user.name : '未知用户'
}

const getAssigneeAvatar = (userId) => {
  const user = teamMembers.find(u => u.id === userId)
  return user ? user.avatar : ''
}

const getDueTimeType = (severity) => {
  const dueTimeMap = {
    'critical': 'danger',
    'high': 'warning',
    'medium': 'info',
    'low': 'success'
  }
  return dueTimeMap[severity] || 'default'
}

const getDueTimeLabel = (severity) => {
  const labelMap = {
    'critical': '24小时',
    'high': '7天',
    'medium': '14天',
    'low': '30天'
  }
  return labelMap[severity] || '无期限'
}

const getLogType = (action) => {
  if (action.includes('漏洞发现')) return 'primary'
  if (action.includes('状态更新')) return 'success'
  if (action.includes('分配处理')) return 'warning'
  return 'info'
}

const getVulnerabilityCardClass = (vulnerability) => {
  const classes = [getSeverityType(vulnerability.severity)]
  if (vulnerability.dueDate && isOverdue(vulnerability.dueDate)) {
    classes.push('overdue-card')
  }
  return classes
}

const isOverdue = (dueDate) => {
  if (!dueDate) return false
  return new Date(dueDate) < new Date()
}

const truncateText = (text, maxLength) => {
  if (!text) return ''
  return text.length > maxLength ? text.substring(0, maxLength) + '...' : text
}

const handleDragEnd = (evt) => {
  console.log('Drag ended', evt)
}

const handleDragAdd = (evt) => {
  const { added } = evt
  if (added && added.element) {
    const vulnerability = allVulnerabilities.value.find(v => v.id === added.element.id)
    if (vulnerability) {
      vulnerability.status = added.newIndex // 这里简化处理，实际应该根据列来设置状态
      ElMessage.success(`已将漏洞 #${vulnerability.id} 移动到新状态`)
    }
  }
}

const handleDragRemove = (evt) => {
  console.log('Item removed', evt)
}

const viewVulnerabilityDetails = (vulnerability) => {
  selectedVulnerability.value = vulnerability
  showDetailsDialog.value = true
}

const editVulnerabilityWorkflow = (vulnerability) => {
  editingVulnerability.value = vulnerability
  // 深拷贝以避免直接修改原对象
  editWorkflowForm.status = vulnerability.status
  editWorkflowForm.assignee = vulnerability.assignee || ''
  editWorkflowForm.dueDate = vulnerability.dueDate ? new Date(vulnerability.dueDate) : ''
  editWorkflowForm.tags = [...(vulnerability.tags || [])]
  editWorkflowForm.notes = ''
  showEditWorkflowDialog.value = true
}

const saveWorkflowChanges = async () => {
  // 验证表单
  const editWorkflowFormRef = ref(null)
  if (!editWorkflowFormRef.value) {
    ElMessage.warning('表单验证失败')
    return
  }
  
  try {
    // 这里模拟API调用，实际项目中应该调用真实API
    const vulnerability = allVulnerabilities.value.find(v => v.id === editingVulnerability.value.id)
    if (vulnerability) {
      // 记录状态变更
      const workflowLog = {
        timestamp: new Date().toISOString(),
        userId: '1', // 当前用户ID，实际应该从用户认证信息获取
        action: '工作流更新',
        details: `更新漏洞工作流信息`
      }
      
      // 如果状态变更，添加状态变更日志
      if (vulnerability.status !== editWorkflowForm.status) {
        const statusChangeLog = {
          timestamp: new Date().toISOString(),
          userId: '1', // 当前用户ID
          action: '状态更新',
          details: `状态从"${getStatusLabel(vulnerability.status)}"更新为"${getStatusLabel(editWorkflowForm.status)}"`
        }
        if (!vulnerability.workflowLogs) vulnerability.workflowLogs = []
        vulnerability.workflowLogs.push(statusChangeLog)
      }
      
      // 更新工作流信息
      vulnerability.status = editWorkflowForm.status
      vulnerability.assignee = editWorkflowForm.assignee
      vulnerability.dueDate = editWorkflowForm.dueDate ? editWorkflowForm.dueDate.toISOString() : null
      vulnerability.tags = editWorkflowForm.tags
      
      // 添加工作流日志
      if (editWorkflowForm.notes) {
        workflowLog.details += `，备注: ${editWorkflowForm.notes}`
      }
      if (!vulnerability.workflowLogs) vulnerability.workflowLogs = []
      vulnerability.workflowLogs.push(workflowLog)
      
      ElMessage.success('工作流信息更新成功')
      showEditWorkflowDialog.value = false
    }
  } catch (error) {
    console.error('更新工作流信息失败:', error)
    ElMessage.error('更新工作流信息失败，请重试')
  }
}

const markAsFalsePositive = async (vulnerability) => {
  try {
    await ElMessageBox.confirm(
      `确定要将漏洞"#${vulnerability.id}"标记为误报吗？`,
      '确认误报',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 这里模拟API调用，实际项目中应该调用真实API
    const index = allVulnerabilities.value.findIndex(v => v.id === vulnerability.id)
    if (index !== -1) {
      allVulnerabilities.value[index].status = 'false_positive'
      
      // 添加工作流日志
      const workflowLog = {
        timestamp: new Date().toISOString(),
        userId: '1', // 当前用户ID
        action: '状态更新',
        details: `状态从"${getStatusLabel(vulnerability.status)}"更新为"误报"`
      }
      if (!allVulnerabilities.value[index].workflowLogs) {
        allVulnerabilities.value[index].workflowLogs = []
      }
      allVulnerabilities.value[index].workflowLogs.push(workflowLog)
      
      ElMessage.success('漏洞已标记为误报')
    }
  } catch (error) {
    // 用户取消操作
  }
}

const executeBulkAction = async () => {
  // 验证表单
  const bulkActionFormRef = ref(null)
  if (!bulkActionFormRef.value) {
    ElMessage.warning('表单验证失败')
    return
  }
  
  try {
    // 这里模拟API调用，实际项目中应该调用真实API
    const updatedCount = selectedVulnerabilities.value.length
    
    selectedVulnerabilities.value.forEach(vulnerability => {
      const vuln = allVulnerabilities.value.find(v => v.id === vulnerability.id)
      if (vuln) {
        switch (bulkActionForm.actionType) {
          case 'assign':
            vuln.assignee = bulkActionForm.assignee
            break
          case 'change_status':
            vuln.status = bulkActionForm.status
            break
          case 'set_due_date':
            vuln.dueDate = bulkActionForm.dueDate.toISOString()
            break
          case 'add_tags':
            if (!vuln.tags) vuln.tags = []
            bulkActionForm.tags.forEach(tag => {
              if (!vuln.tags.includes(tag)) {
                vuln.tags.push(tag)
              }
            })
            break
          case 'close':
            vuln.status = 'closed'
            break
        }
        
        // 添加工作流日志
        const workflowLog = {
          timestamp: new Date().toISOString(),
          userId: '1', // 当前用户ID
          action: '批量操作',
          details: `执行了批量${getActionLabel(bulkActionForm.actionType)}操作`
        }
        if (bulkActionForm.notes) {
          workflowLog.details += `，备注: ${bulkActionForm.notes}`
        }
        if (!vuln.workflowLogs) vuln.workflowLogs = []
        vuln.workflowLogs.push(workflowLog)
      }
    })
    
    ElMessage.success(`成功对${updatedCount}个漏洞执行批量操作`)
    showBulkActionDialog.value = false
    // 清空选择
    selectedVulnerabilities.value = []
    // 重置表单
    resetBulkActionForm()
  } catch (error) {
    console.error('执行批量操作失败:', error)
    ElMessage.error('执行批量操作失败，请重试')
  }
}

const getActionLabel = (actionType) => {
  const labelMap = {
    'assign': '分配',
    'change_status': '状态更新',
    'set_due_date': '设置截止日期',
    'add_tags': '添加标签',
    'close': '关闭'
  }
  return labelMap[actionType] || actionType
}

const exportWorkflowData = () => {
  // 这里应该实现导出功能
  ElMessage.success('数据导出功能待实现')
}

const refreshData = () => {
  loadVulnerabilities()
  ElMessage.success('数据已刷新')
}

const handleSelectionChange = (selection) => {
  selectedVulnerabilities.value = selection
}

const handleSearch = () => {
  currentPage.value = 1
}

const handleFilter = () => {
  currentPage.value = 1
}

const resetFilters = () => {
  searchQuery.value = ''
  filterStatus.value = ''
  filterSeverity.value = ''
  filterAssignee.value = ''
  filterDueDate.value = ''
  currentPage.value = 1
}

const handleSizeChange = (newSize) => {
  pageSize.value = newSize
}

const handleCurrentChange = (newCurrent) => {
  currentPage.value = newCurrent
}

const resetBulkActionForm = () => {
  Object.assign(bulkActionForm, {
    actionType: '',
    assignee: '',
    status: '',
    dueDate: '',
    tags: [],
    notes: ''
  })
}

// 初始化
onMounted(() => {
  loadVulnerabilities()
})
</script>

<style scoped>
.vulnerability-workflow-container {
  padding: 20px;
}

.workflow-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.search-filter-container {
  margin-bottom: 20px;
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.workflow-stats {
  margin-bottom: 20px;
}

.workflow-board {
  display: flex;
  overflow-x: auto;
  margin-bottom: 30px;
  padding: 10px 0;
}

.workflow-columns {
  display: flex;
  gap: 20px;
  width: 100%;
}

.workflow-column {
  flex: 1;
  min-width: 300px;
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  max-height: 600px;
}

.workflow-column.overdue-column {
  background-color: #fef0f0;
  border: 1px solid #fde2e2;
}

.column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.column-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.column-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 5px;
}

.vulnerability-card {
  background-color: white;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border-left: 4px solid #dcdfe6;
}

.vulnerability-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.vulnerability-card.critical {
  border-left-color: #f56c6c;
}

.vulnerability-card.high {
  border-left-color: #e6a23c;
}

.vulnerability-card.medium {
  border-left-color: #409eff;
}

.vulnerability-card.low {
  border-left-color: #67c23a;
}

.vulnerability-card.overdue-card {
  border-left-color: #f56c6c;
  background-color: #fef0f0;
}

.vulnerability-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.vulnerability-id {
  font-size: 12px;
  color: #909399;
  font-weight: 500;
}

.vulnerability-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #303133;
  line-height: 1.4;
}

.vulnerability-meta {
  font-size: 12px;
  color: #606266;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}

.vulnerability-type {
  font-size: 12px;
  background-color: #f0f2f5;
  padding: 2px 8px;
  border-radius: 4px;
  color: #606266;
}

.vulnerability-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.assignee-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.assignee-name {
  font-size: 12px;
  color: #606266;
}

.due-date {
  font-size: 12px;
  color: #606266;
}

.due-date.overdue {
  color: #f56c6c;
  font-weight: 500;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

.workflow-table-container {
  margin-top: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.vulnerability-title-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vulnerability-title-cell .vulnerability-title {
  font-weight: 500;
  color: #303133;
}

.vulnerability-title-cell .vulnerability-type {
  font-size: 12px;
  background-color: #f0f2f5;
  padding: 2px 6px;
  border-radius: 4px;
  color: #606266;
  width: fit-content;
}

.assignee-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.no-assignee {
  color: #909399;
  font-size: 14px;
}

.overdue-text {
  color: #f56c6c;
  font-weight: 500;
}

.vulnerability-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 600px;
  overflow-y: auto;
}

.details-section {
  margin-bottom: 20px;
}

.details-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 8px;
}

.vulnerability-description,
.vulnerability-recommendation {
  line-height: 1.6;
  color: #606266;
  white-space: pre-wrap;
}

.timeline-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.log-user {
  font-weight: 500;
  color: #303133;
}

.log-action {
  color: #606266;
}

.log-details {
  color: #909399;
  font-size: 13px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .workflow-columns {
    flex-wrap: wrap;
  }
  
  .workflow-column {
    min-width: calc(50% - 10px);
  }
}

@media (max-width: 768px) {
  .vulnerability-workflow-container {
    padding: 10px;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .header-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  
  .search-filter-container .el-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .search-filter-container .el-col {
    width: 100%;
  }
  
  .workflow-stats .el-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .workflow-stats .el-col {
    width: 100%;
  }
  
  .workflow-column {
    min-width: 100%;
  }
}

@media (max-width: 480px) {
  .vulnerability-meta {
    flex-direction: column;
    gap: 4px;
  }
  
  .vulnerability-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
</style>